import {ref ,nextTick,computed} from 'vue'
import { specs,updatespecs,delspecs,createvalue,delvalue} from "@/api/product.js"
import {cartesianProductOf} from "@/composables/util.js"
//當前產品id
export const productId=ref(0)

//規格選項列表
export const sku_list=ref([])

//table

export const sku_table = ref([]);
//初始化規格選項列表

export function initSku(d)
{
    
    sku_list.value=d.specs.map(item=>{
        item.spec.map(v=>{
            
            return v
        })
        
        return item
    })
    sku_table.value=d.sku
    
}



//添加規格選項

export function addspecs()
{
    specs({
       products_id :productId.value,
       specs_name:"规格名称",
       
    }).then(res=>{
        sku_list.value.push({
            ...res,
            spec:[]
        })
        getTableData()
    })
}

//修改规格
export function editspecs(item){
   
    updatespecs(item.id,{
        specs_name:item.specs_name
    }).then(res=>{
        getTableData();
    })
}

//删除规格

export function deletespecs(id){
    
    delspecs(id).then(res=>{
       const i= sku_list.value.findIndex(o=>o.id==id)
       if(i != -1){
        sku_list.value.splice(i,1)
       }
       getTableData();
    })
}

//初始化規格值
export function ininSkuItem(id){
   const item= sku_list.value.find(o=>o.id==id)

    const inputValue = ref('')
    const inputVisible = ref(false)
    const InputRef = ref()

    const handleClose = (tag) => {
        delvalue(tag.id).then(res=>{
          let i=  item.spec.findIndex(o=>o.id==tag.id)
          if(i != -1){
            item.spec.splice(i,1)
          }
          getTableData();
        })
        
    }

    const showInput = () => {
        inputVisible.value = true
        nextTick(() => {
            InputRef.value.input.focus()
        })
    }

    const handleInputConfirm = () => {
        if (!inputValue.value) {
            inputValue.value = false
            return
        }
       
        createvalue({
            specs_id:id,
            name:inputValue.value
        }).then(res=>{
            item.spec.push(res);
            getTableData()
        }).finally(()=>{
            inputVisible.value = false
            inputValue.value = ''
        })
        
        
    }
    return {
        item,
        inputValue,
        inputVisible,
        InputRef,
        handleClose,
        showInput,
        handleInputConfirm
    }
}

 //初始化表格
export function initSkuTable() {
    const skuLabels = computed(() =>
   
    sku_list.value.filter((v) => v.spec.length > 0)
    );
  
    // 获取表头
    const tableThs = computed(() => {
      let length = skuLabels.value.length;
      return [
        {
          name: "產品規格",
          colspan: length,
          width: "",
          rowspan: length > 0 ? 1 : 2,
        },
        {
          name: "銷售價",
          width: "100",
          rowspan: 2,
        },
  
        {
          name: "成本價",
          width: "100",
          rowspan: 2,
        },
        {
          name: "庫存",
          width: "100",
          rowspan: 2,
        },
      ];
    });
  
    return {
      skuLabels,
      tableThs,
      sku_table,
    };
  }

  function getTableData() {
    setTimeout(() => {
      if (sku_list.value.length === 0) return [];
      let list = [];
      sku_list.value.forEach((o) => {
     
        if (o.spec) {
          list.push(o.spec);
        }
      });
  
      if (list.length == 0) {
        return [];
      }
     
      let arr = cartesianProductOf(...list);
     
      sku_table.value = [];
      sku_table.value = arr.map((o) => {
         
        return {
          products_id: productId.value,
          price: 0,
          const: 0,
          num: 0,
          name:o
        };
      });
  
    }, 100);
  }

